<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-项目对准(flex layout - align self)</title>
  <!-- 
    在CSS的flex布局中，align-self属性用于控制单个flex项目在交叉轴方向上的对齐方式，与align-self属性类似但作用于单个项目。
    align-self属性说明： 
 
      1. align-self: flex-start;：项目在交叉轴起点对齐。 
      2. align-self: flex-end;：项目在交叉轴末尾对齐。 
      3. align-self: center;：项目在交叉轴居中对齐。 
      4. align-self: baseline;：项目在基线对齐。 
      5. align-self: stretch;：项目沿交叉轴拉伸以填充整个容器。
   -->
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      background-color: skyblue;
      width: 400px;
      height: 200px;
    }

    .item {
      width: 80px;
      height: 80px;
    }

    .item4 {
      width: 80px;
      background-color: royalblue;
    }
  </style>
  <style>
    /* flex-start - flex项目在交叉轴起点对齐 */
    .display-flex-align-self-flex-start {
      align-self: flex-start;
    }

    /* flex-end - flex项目在交叉轴末尾对齐 */
    .display-flex-align-self-flex-end {
      align-self: flex-end;
    }

    /* center - flex项目在交叉轴居中对齐 */
    .display-flex-align-self-center {
      align-self: center;
    }

    /* baseline - flex项目在基线对齐 */
    .display-flex-align-self-baseline {
      align-self: baseline;
    }

    /* stretch - flex项目沿交叉轴拉伸以填充整个容器 */
    .display-flex-align-self-stretch {
      align-self: stretch;
    }
  </style>
</head>

<body>

  <h3>1. align-self: flex-start - 默认值，flex项目在交叉轴起点对齐</h3>
  <div class="container">
    <div class="item item1 display-flex-align-self-flex-start">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
  </div>

  <h3>2. align-self: flex-end - flex项目在交叉轴末尾对齐</h3>
  <div class="container">
    <div class="item item1 display-flex-align-self-flex-end">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
  </div>

  <h3>3. align-self: center - flex项目在交叉轴居中对齐</h3>
  <div class="container">
    <div class="item item1 display-flex-align-self-center">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
  </div>

  <h3>4. align-self: baseline - flex项目在基线对齐</h3>
  <div class="container">
    <div class="item item1 display-flex-align-self-baseline">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
  </div>

  <h3>5. align-self: stretch - flex项目沿交叉轴拉伸以填充整个容器</h3>
  <div class="container">
    <div class="item item1 display-flex-align-self-stretch">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item4">4</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>

</body>

</html>